<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onMounted, onUnmounted } from 'vue'

import { clear, curAnswerIdx, curQuestion, curQuestionIdx, next, pre, progressValue, questionCount, start } from './data'
import { imagePath } from '@/libs/file-utils'

const img_bg = imagePath('quiz/career/bg.jpg')
const img_title = imagePath('quiz/career/title.png')
const img_logo = imagePath('quiz/career/detail/logo.png')
const card_progress = imagePath('quiz/career/detail/card-progress.png')
const btn_bg = imagePath('quiz/career/detail/btn-bg.png')

onMounted(start)
onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="quiz-career-detail"
    :pageStyle="{ backgroundImage: img_bg }"
  >
    <div
      class="title"
      :style="{ backgroundImage: img_title }"
    ></div>

    <div
      class="card-progress"
      :style="{ backgroundImage: card_progress }"
    >
      <div class="item">
        <div class="value">{{ curQuestionIdx + 1 }}</div>
        <div>当前题目</div>
      </div>
      <div class="divider"></div>
      <div class="item">
        <div class="value">{{ questionCount }}</div>
        <div>总额数</div>
      </div>
      <div class="divider"></div>
      <div class="item">
        <div class="value">{{ progressValue }}</div>
        <div>完成率</div>
      </div>

      <div
        class="logo"
        :style="{ backgroundImage: img_logo }"
      ></div>
    </div>

    <template v-if="curQuestion">
      <div class="card-question">
        <div>问题{{ curQuestionIdx + 1 }}：</div>
        <div class="content">{{ curQuestion.text }}</div>
      </div>

      <div class="options">
        <div
          v-for="(item, index) in curQuestion.options"
          :key="index"
          class="option"
          @click="curAnswerIdx = index"
        >
          <div
            class="icon"
            :class="{ active: curAnswerIdx === index }"
          ></div>
          <div>{{ item.label }}</div>
        </div>
      </div>
    </template>

    <div class="btns">
      <div
        v-if="curQuestionIdx"
        class="btn"
        :style="{ backgroundImage: btn_bg }"
        @click="pre"
      >上一题</div>
      <div
        class="btn"
        :style="{ backgroundImage: btn_bg }"
        @click="next"
      >{{ curQuestionIdx <
        questionCount
        -
        1
        ? '下一题'
        : '提交'
      }}</div
        >
      </div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.title {
  width: 480rpx;
  height: 78rpx;

  margin: 40rpx auto 0;
}

.card-progress {
  position: relative;
  width: 612rpx;
  height: 222rpx;

  margin: 30rpx auto 0;

  box-shadow: 0 8rpx 8rpx 0 rgba(216, 106, 77, .44), 0 0 4rpx 2rpx #D86A4D;

  display: flex;
  justify-content: center;
  align-items: center;

  .item {
    width: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    color: #6D3312;
    font-size: 32rpx;
    line-height: 48rpx;

    .value {
      margin-bottom: 8rpx;

      font-size: 64rpx;
      line-height: 64rpx;
    }
  }

  .divider {
    width: 2rpx;
    height: 158rpx;

    background-color: rgba(#691B0A, .21);
  }

  .logo {
    position: absolute;
    top: 174rpx;
    right: -70rpx;

    width: 370rpx;
    height: 500rpx;

    z-index: -1;
  }
}

.card-question {
  margin-top: 16rpx;
  margin-left: 66rpx;

  color: #702A12;
  font-size: 40rpx;
  line-height: 48rpx;

  .content {
    width: 360rpx;

    margin-top: 8rpx;
  }
}

.options {
  margin-top: 32rpx;
  margin-left: 34rpx;

  .option {
    min-width: 390rpx;
    max-width: 682rpx;

    margin-bottom: 16rpx;

    box-sizing: border-box;
    padding: 16rpx 32rpx;

    display: flex;

    color: #6D3312;
    font-size: 40rpx;
    line-height: 40rpx;

    .icon {
      width: 40rpx;
      height: 40rpx;

      margin-right: 12rpx;

      box-sizing: border-box;
      border: 4rpx solid #6D3312;
      border-radius: 50%;

      transition: background-color .3s;

      &.active {
        background-color: #6D3312;
      }
    }
  }
}

.btns {
  width: 100%;

  margin-top: 100rpx;

  box-sizing: border-box;
  padding-left: 34rpx;
  padding-right: 32rpx;

  display: flex;
  justify-content: center;

  .btn {
    width: 321rpx;
    height: 103rpx;

    color: #A23406;
    font-size: 48rpx;
    line-height: 100rpx;
    text-align: center;
  }
}
</style>